<template>
  <a-modal
    :open="open"
    width="1300px"
    title="新增套餐"
    centered
    :keyboard="false"
    :ok-button-props="{ disabled: rowSelection.selectedRowKeys.length === 0 }"
    @ok="onOk"
    @cancel="onCancel"
  >
    <div class="flex">
      <div class="w-2/5 mr-2">
        <BaseTable
          :height="600"
          :data-source="suitList"
          :custom-row="onClickRow"
          :row-class-name="(record) => (record.id === selectedSuit.id ? 'selected-row' : 'cursor-pointer')"
          :scroll="{ x: 400, y: 600 }"
          :loading="loading"
          :columns="suitColumns"
        >
          <template #bodyCell="{ column, index }">
            <template v-if="column.dataIndex == 'xh'">
              {{ index + 1 }}
            </template>
          </template>
        </BaseTable>
      </div>
      <div class="w-3/5">
        <BaseTable
          class="w-full"
          :height="600"
          :data-source="selectedSuit.packageDetailList"
          :scroll="{ x: 400, y: 600 }"
          :loading="loading"
          row-key="id"
          :row-selection="rowSelection"
          :columns="detailColumns"
        >
          <template #bodyCell="{ column, record, index }">
            <template v-if="column.dataIndex == 'xh'">
              {{ index + 1 }}
            </template>
            <template v-if="column.dataIndex === 'referValue' && record.minValue && record.maxValue">
              {{ `${record.minValue}~${record.maxValue}${record.unit}` }}
            </template>
          </template>
        </BaseTable>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
import useStore from '../store'

const store = useStore()
const props = defineProps({
  open: Boolean
})
const selectedSuit = ref({ packageDetailList: [] }) // 选择的大类
const suitList = ref([]) // 大类列表
const selectedDetailList = ref([])
const loading = ref(true)
const selectedDetailKeys = ref([])
const emit = defineEmits(['update:open', 'success'])
const suitColumns = ref([
  {
    title: '序号',
    dataIndex: 'xh',
    width: 60
  },
  {
    title: '套餐名称',
    ellipsis: true,
    dataIndex: 'packageName'
  },
  {
    title: '检验大类',
    ellipsis: true,
    dataIndex: 'categroyName'
  },
  {
    title: '仪器类型',
    ellipsis: true,
    dataIndex: 'instrumentTypeName'
  }
])
const detailColumns = ref([
  {
    title: '序号',
    dataIndex: 'xh',
    width: 60
  },
  {
    title: '项目名称',
    ellipsis: true,
    dataIndex: 'itemName'
  },
  {
    title: '项目代码',
    ellipsis: true,
    dataIndex: 'itemCode'
  },
  {
    title: '参考值',
    ellipsis: true,
    dataIndex: 'referValue'
  }
])
const getSuitList = async () => {
  loading.value = true
  const { code, data = [], msg } = await post('/lis/LisPackage/getLisPackageList', { lisInstrumentTypeId: store.currentInstrument?.instrumentTypeId })
  loading.value = false
  if (code !== 0) return message.error(msg)
  // 判断性别根据性别显示最大值最小值
  const isFemale = store.currentPatient?.brXb === '女'
  const formatData = data.map((item) => {
    return {
      ...item,
      packageDetailList: item.packageDetailList.map((detail) => {
        return {
          ...detail,
          minValue: isFemale ? detail.femaleMinValue : detail.maleMinValue,
          maxValue: isFemale ? detail.femaleMaxValue : detail.maleMaxValue
        }
      })
    }
  })
  suitList.value = formatData
  selectedSuit.value = formatData.length > 0 ? formatData[0] : { packageDetailList: [] }
  selectedDetailList.value = []
  selectedDetailKeys.value = []
}

const rowSelection = ref({
  checkStrictly: true,
  selectedRowKeys: selectedDetailKeys,
  onChange: (selectedRowKeys, selectedRows) => {
    selectedDetailKeys.value = selectedRowKeys
    selectedDetailList.value = selectedRows
  }
})

const onClickRow = (record) => {
  return {
    onClick: () => {
      selectedSuit.value = record
      selectedDetailList.value = []
      selectedDetailKeys.value = []
    }
  }
}

const onOk = async () => {
  emit('success', selectedDetailList.value)
  onCancel()
}
const onCancel = () => {
  suitList.value = []
  selectedDetailList.value = []
  selectedDetailKeys.value = []
  emit('update:open', false)
}
watch(
  () => props.open,
  (val) => {
    val && getSuitList()
  }
)
</script>
<style lang="less" scoped></style>
